<template>
  <!-- 文字配置 -->
  <section class="font-control">
    <div class="control-head">
      <p class="section-name">{{ controlName }}</p>
      <p class="reset" @click="resetFontConfig">重置</p>
    </div>
    <section class="control-body">
      <div class="color-control">
        <a-input type="color" v-model="fontData.color" />
      </div>
      <div class="color-text">
        <a-input type="text" v-model="fontData.color" />
      </div>
      <div class="fontsize-control">
        <a-input
          type="number"
          v-model="fontData.fontNum"
          @change="$set(fontData, 'fontSize', fontData.fontNum + 'px')"
        />
      </div>
      <div class="style-control">
        <a-tooltip placement="bottom">
          <template slot="title"> 加粗 </template>
          <i
            class="iconfont icon-wenben-jiacu"
            :class="fontData.fontWeight == 'bold' ? 'active' : ''"
            @click="setFontBold"
          ></i>
        </a-tooltip>

        <a-tooltip placement="bottom">
          <template slot="title"> 斜体 </template>
          <i
            class="iconfont icon-wenben-xieti"
            :class="fontData.fontStyle == 'italic' ? 'active' : ''"
            @click="setFontStyle"
          ></i>
        </a-tooltip>

        <a-tooltip placement="bottom">
          <template slot="title"> 下划线 </template>
          <i
            class="iconfont icon-wenben-xiahuaxian"
            :class="fontData.textDecoration == 'underline' ? 'active' : ''"
            @click="setTextDecoration"
          ></i>
        </a-tooltip>

        <a-tooltip placement="bottom">
          <template slot="title"> 贯穿线 </template>
          <i
            class="iconfont icon-wenben-shanchuxian"
            :class="fontData.textDecoration == 'line-through' ? 'active' : ''"
            @click="setTextLineThrough"
          ></i>
        </a-tooltip>
      </div>
      <!-- 对齐方式配置 -->
      <section class="align-control" v-if="showAlign">
        <a-tooltip placement="bottom">
          <template slot="title"> 左对齐 </template>
          <i
            class="iconfont icon-wenben-zuoduiqi"
            :class="fontData.textAlign == 'left' ? 'active' : ''"
            @click="$set(fontData, 'textAlign', 'left')"
          ></i>
        </a-tooltip>

        <a-tooltip placement="bottom">
          <template slot="title"> 中间对齐 </template>
          <i
            class="iconfont icon-wenben-juzhongduiqi"
            :class="fontData.textAlign == 'center' ? 'active' : ''"
            @click="$set(fontData, 'textAlign', 'center')"
          ></i>
        </a-tooltip>

        <a-tooltip placement="bottom">
          <template slot="title"> 右对齐 </template>
          <i
            class="iconfont icon-wenben-youduiqi"
            :class="fontData.textAlign == 'right' ? 'active' : ''"
            @click="$set(fontData, 'textAlign', 'right')"
          ></i>
        </a-tooltip>

        <a-tooltip placement="bottom">
          <template slot="title"> 自由对齐 </template>
          <i
            class="iconfont icon-wenben-liangduanduiqi"
            :class="fontData.textAlign == 'justify' ? 'active' : ''"
            @click="$set(fontData, 'textAlign', 'justify')"
          ></i>
        </a-tooltip>
      </section>
    </section>
  </section>
</template>

<script>
export default {
  name: "fontControl",
  props: {
    fontData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    showAlign: {
      type: Boolean,
      default: true,
    },
    controlName: {
      type: String,
      default: "文字组件",
    },
  },
  data() {
    return {
      //   css: {
      //     color: "#000000",
      //     fontNum: "14",
      //     fontSize: "",
      //     fontStyle: "normal", // normal  italic斜体
      //     fontWeight: "normal", // normal bold加粗
      //     textDecoration: "inherit", // inherit underline下划线 line-through贯穿横线
      //     textAlign: "inherit", // left right center justify
      //   },
    };
  },
  watch: {},
  computed: {},
  mounted() {
    console.log(this.fontData);
  },
  methods: {
    // 重置字体设置
    resetFontConfig() {
      this.$emit("resetFontCss");
    },
    // 设置字体项
    setFontBold() {
      let val = this.fontData.fontWeight == "bold" ? "normal" : "bold";
      this.$set(this.fontData, "fontWeight", val);
    },
    setFontStyle() {
      let val = this.fontData.fontStyle == "italic" ? "normal" : "italic";
      this.$set(this.fontData, "fontStyle", val);
    },
    setTextDecoration() {
      let val =
        this.fontData.textDecoration == "underline" ? "inherit" : "underline";
      this.$set(this.fontData, "textDecoration", val);
    },
    setTextLineThrough() {
      let val =
        this.fontData.textDecoration == "line-through"
          ? "inherit"
          : "line-through";
      this.$set(this.fontData, "textDecoration", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.font-control {
  width: 100%;
  .control-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0 12px 0;
    font-size: 12px;
    font-weight: 400;
    color: #000000;
    .reset {
      font-size: 12px;
      font-weight: 400;
      color: #8e8e8e;
      cursor: pointer;
      user-select: none;
    }
    p {
      margin: 0;
    }
  }

  .control-body {
    display: flex;
    flex-wrap: wrap;
    input {
      border: 0 none;
      height: 100%;
      background: #f6f7f9;
      padding-top: 0;
      padding-bottom: 0;
    }
    .color-control {
      width: 48px;
      height: 40px;
      background: #f6f7f9;
      border-radius: 6px;
      input {
        padding: 6px 12px;
      }
    }
    .color-text {
      width: 86px;
      height: 40px;
      background: #f6f7f9;
      border-radius: 6px;
      margin: 0 8px;
    }
    .fontsize-control {
      width: 78px;
      height: 40px;
      background: #f6f7f9;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .style-control {
      width: 228px;
      height: 40px;
      background: #f6f7f9;
      border-radius: 6px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 8px;
      .iconfont {
        width: 32px;
        font-size: 19px;
        cursor: pointer;
        color: #000000;
      }
      .iconfont:hover {
        background: rgba(0, 0, 0, 0.08);
        border-radius: 4px;
      }
      .active {
        color: #1890fc;
      }
    }
  }
}
.align-control {
  width: 228px;
  height: 40px;
  background: #f6f7f9;
  border-radius: 6px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 8px;
  .iconfont {
    width: 32px;
    font-size: 19px;
    cursor: pointer;
    color: #000000;
  }
  .iconfont:hover {
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
  }
  .active {
    border-radius: 4px;
    color: #1890fc;
  }
}
</style>
